<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.loadclass {
				text-align: center;
				margin: 0px auto;
				/*max-width: 750px;
				min-width: 480px;
				max-height: 1334px;
				min-height: 900px;*/
				width: 525px;
				height: 933.8px;
			}
			
			#loaddiv2 img,
			#loaddiv1 img {
				width: 100%;
			}
			
			#loaddiv2 {
				display: none;
				position: relative;
			}
			
			#loaddiv2 #loaddiv2btn {
				width: 30%;
				position: absolute;
				top: 80%;
				left: 36%;
			}
			
			#loaded {
				display: none;
				background-image: url(img/tu1-background.png);
				/*background-size: contain;*/
				/*background-size: 100% 100%;*/
				position: relative;
			}
			
			#nav {
				width: 100%;
				background-image: url(img/navbg.png);
				/*background-size: contain;*/
			}
			
			#nav :first-child {
				color: #FFFFFF;
			}
			
			#nav span {
				text-align: center;
				vertical-align: middle;
				display: inline-block;
				width: 20%;
				line-height: 70px;
				color: #8861AB;
				font-family: "微软雅黑";
				font-size: 24px;
			}
			
			#nav span img {
				display: block;
				width: 38%;
				margin: 0px auto;
			}
			
			#myself {
				height: 100px;
				background-image: url(img/selfbg.png);
			}
			
			#myself #mytx {
				display: inline-block;
				margin-left: 0px;
				margin-top: 10px;
				width: 80px;
				float: left;
				margin-left: 30px;
			}
			
			#myself span {
				display: inline-block;
				color: #FFFFFF;
				font-family: "微软雅黑";
				font-size: 25px;
				line-height: 100px;
				margin-top: 0px;
				margin-left: 30px;
				float: left;
			}
			
			#myself :last-child {
				display: inline-block;
				width: 25px;
				float: right;
				margin-right: 35px;
				margin-top: 30px;
			}
			
			#icons {
				width: 100%;
				margin-top: 5px;
				height: 150px;
				background-image: url(img/icobg.png);
			}
			
			#icons div {
				margin: 0px auto;
				display: inline-block;
				/*width: 24%;*/
				width: 131px;
				height: 90px;
				margin-top: 40px;
				float: left;
			}
			
			#icons div img {
				display: inline-block; 
				/*width: 39%;*/
				width: 50px;
				height: 50px;
				margin: 0px auto;
			}
			
			#icons div span {
				margin-top: 6px;
				display: inline-block;
				line-height: 30px;
				color: lightgray;
				font-family: "微软雅黑";
				font-size: 15px;
			}
			
			#list {
				height: 250px;
				background-image: url(img/listbg.png);
				margin-top: 5px;
			}
			
			#list #listdiv1 {
				margin: 0px auto;
				width: 96%;
				height: 40px;
				border-bottom: 1px solid #252D42;
			}
			
			#list #listdiv1 span {
				display: inline-block;
				line-height: 40px;
				float: left;
				color: lightgray;
				font-family: "微软雅黑";
				font-size: 16px;
				margin-left: 30px;
			}
			
			#list #listdiv1 img {
				float: right;
				width: 12px;
				display: inline-block;
				margin-right: 20px;
				margin-top: 10px;
			}
			
			#list #listdiv2 {
				width: 96%;
				margin: 0px auto;
				border-bottom: 1px solid #252D42;
				height: 105px;
			}
			
			#list #listdiv2 img {
				height: 100px;
				float: left;
				margin-left: 20px;
				margin-top: 1px;
			}
			
			#list #listdiv2 div {
				width: 350px;
				height: 60px;
				display: inline-block;
				margin-left: 20px;
				margin-top: 20px;
				position: relative;
				text-align: left;
			}
			
			#list #listdiv2 div big {
				display: inline-block;
				font-family: "微软雅黑";
				font-size: 20px;
				color: #FFFFFF;
				position: absolute;
				top:0px;
			}
			
			#list #listdiv2 div span {
				font-family: "微软雅黑";
				font-size: 15px;
				color: lightgray;
				position: absolute;
				top: 35px;
			}
			
			#list #listdiv3 {
				width: 96%;
				margin: 0px auto;
				height: 105px;
			}
			
			#list #listdiv3 img {
				height: 100px;
				float: left;
				margin-left: 20px;
				margin-top: 1px;
			}
			
			#list #listdiv3 div {
				width: 350px;
				height: 60px;
				display: inline-block;
				margin-left: 20px;
				margin-top: 20px;
				position: relative;
				text-align: left;
			}
			
			#list #listdiv3 div big {
				display: inline-block;
				font-family: "微软雅黑";
				font-size: 20px;
				color: #FFFFFF;
				position: absolute;
				top:0px;
			}
			
			#list #listdiv3 div span {
				font-family: "微软雅黑";
				font-size: 15px;
				color: lightgray;
				position: absolute;
				top: 35px;
			}
			
			#player {
				width: 100%;
				height: 80px;
				position: absolute;
				bottom: 0px;
				background-image: url(img/playerbg.png);
			}
			
			#jdt {
				width: 100%;
				height: 8px;
				background-color: #49585D;
			}
			
			#jdtspan {
				display: block;
				width: 0px;
				height: 8px;
				background-color: #2AF17F;
			}
			
			#myplay :first-child {
				height: 72px;
				float: left;
			}
			
			#myplay #myplaydiv1 {
				position: relative;
				display: inline-block;
				margin-left: 15px;
				margin-top: 10px;
				width: 200px;
				height: 55px;
			}
			
			#myplay #myplaydiv1 big {
				display: block;
				height: 25px;
				font-size: 20px;
				font-family: "微软雅黑";
				color: #CCCCCC;
				position: absolute;
				top:0px
			}
			
			#myplay #myplaydiv1 span {
				display: block;
				font-family: "微软雅黑";
				color: gray;
				font-size: 15px;
				position: absolute;
				top: 30px;
			}
			
			#myplay #myplaydiv2 {
				position: relative;
				height: 72px;
				float: right;
			}
			
			#myplay #myplaydiv2 img {
				margin-top: 12px;
				margin-right: 10px;
				width: 45px;
				height: 45px;
			}
			
			#mp3list {
				position: absolute;
				top: -408px;
				left: -80px;
				width: 300px;
				height: 400px;
				background-image: url(img/tu1-listbg.png);
				background-size: 100% 100%;
				display: none;
			}
			
			#mp3list #bofangliebiao {
				float: left;
				width: 260px;
				height: 40px;
				text-align: left;
				text-indent: 5px;
				line-height: 40px;
				font-family: "微软雅黑";
				font-size: 15px;
				color: gainsboro;
				border-bottom: 1px solid darkgray;
				margin-left: 20px;
			}
			
			#mp3list #bofangliebiao div {
				float: right;
				width: 80px;
				height: 30px;
				margin-top: 10px;
			}
			
			#mp3list #bofangliebiao div img {
				float: left;
				margin: 0px auto;
				width: 25px;
				height: 20px;
			}
			
			#mp3list ul {
				float: left;
				width: 300px;
				list-style-type: none;
			}
			
			#myplay #myplaydiv2 #mp3list ul li {
				float: left;
				width: 300px;
				height: 33px;
				line-height: 33px;
				text-align: left;
				text-indent: 2em;
				font-family: "微软雅黑";
				font-size: 13px;
				color: darkgrey;
				-webkit-user-select: none;  /* Chrome all / Safari all */
                -moz-user-select: none;     /* Firefox all */
                -ms-user-select: none;      /* IE 10+ */

			}
			
			.active {
				border: 1px solid springgreen;
			}
		</style>
		<script src="MusicItem.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//			document.addEventListener("WeixinJSBridgeReady", function () {
			//         music.play();
			//              }, false);
			var num = 0;
			var playstylenum = 0;
			window.onload = function() {
				var load1mp3 = document.getElementById("loadmp3");
				load1mp3.play();

				setTimeout(function() {
					document.getElementById("loaddiv1").style.display = "none";
					document.getElementById("loaddiv2").style.display = "block";
				}, 3000);
				var myaudio = document.getElementById("myaudio");
				var mp3list = document.getElementById("mp3list");
				if(mp3list.children[1] == undefined) {
					var ul = document.createElement("ul");
					for(var i = 0; i < Music.items.length; i++) {
						var li = document.createElement("li");
						li.innerHTML = Music.items[i]["title"] + "-" + Music.items[i]["author"];
						li.style.cursor = "pointer";
						(function(a) {
							li.onclick = function() {
								num = a;
								myaudio.src = Music.items[a]["url"];
								myaudio.play();
							}
						})(i);
						ul.appendChild(li);
					}
					mp3list.appendChild(ul);
				}
				var lis = document.querySelectorAll("#mp3list li");
				lis[num].style.color = "springgreen";
				document.getElementById("myplay").children[0].src=Music.items[num]["src"];
				document.getElementById("myplaydiv1").children[0].innerHTML=Music.items[num]["title"];
				document.getElementById("myplaydiv1").children[1].innerHTML=Music.items[num]["author"];
				myaudio.src=Music.items[num]["url"];
			}

			function load2() {
				document.getElementById("loadmp3").src = "";
				var loaded = document.getElementById("loaded");
				document.getElementById("loaddiv2").style.display = "none";
				loaded.style.display = "block";
			}

			function play() {
				var myaudio = document.getElementById("myaudio");
				//				myaudio.src=Music.items[0].url;
				if(myaudio.paused) {
					myaudio.play();
				} else {
					myaudio.pause();
				}
			}

			function jdt() {
				var myaudio = document.getElementById("myaudio");
				var jdt = document.getElementById("jdt");
				var jdtspan = document.getElementById("jdtspan");
				var jdtw = parseInt(document.defaultView.getComputedStyle(jdt, null).width);
				jdtspan.style.width = "" + myaudio.currentTime / myaudio.duration * jdtw + "px";
				if(myaudio.paused) {
					document.getElementById("playcoin").src = "img/tu1-play.png";
				} else {
					document.getElementById("playcoin").src = "img/tu1-pause.png";
				}
				playstyle();
			}

			function changejdt(e) {
				var myaudio = document.getElementById("myaudio");
				var jdt = document.getElementById("jdt");
				var jdtw = parseInt(document.defaultView.getComputedStyle(jdt, null).width);
				myaudio.currentTime = e.offsetX / jdtw * (myaudio.duration);
			}

			function last() {
				num = (num == 0) ? (Music.items.length - 1) : (num - 1);
				var myaudio = document.getElementById("myaudio");
				myaudio.src = Music.items[num].url;
				myaudio.play();
			}

			function next() {
				num = (num < Music.items.length - 1) ? (num + 1) : 0;
				var myaudio = document.getElementById("myaudio");
				myaudio.src = Music.items[num].url;
				myaudio.play();
			}

			function list() {
				var mp3list = document.getElementById("mp3list");
				if(mp3list.style.display == "block") {
					mp3list.style.display = "none";
				} else {
					mp3list.style.display = "block";
				}
			}

			function playstyle() {
				var myaudio = document.getElementById("myaudio");
				var lis = document.querySelectorAll("#mp3list li");
				if(lis.length > 0) {
					for(var i = 0; i < lis.length; i++) {
						lis[i].style.color = "darkgrey";
					}
					lis[num].style.color = "springgreen";
				}

				if(myaudio.ended) {
					switch(playstylenum) {
						case 0:
							next();
							break;
						case 1:
							play()
							break;
						case 2:
							var b = parseInt(Math.random() * lis.length);
							num = b;
							myaudio.src = Music.items[num].url;
							myaudio.play();
							break;
					}
				}
				document.getElementById("myplay").children[0].src=Music.items[num]["src"];
				document.getElementById("myplaydiv1").children[0].innerHTML=Music.items[num]["title"];
				document.getElementById("myplaydiv1").children[1].innerHTML=Music.items[num]["author"];
			}

			function setplaystyle(a, t) {
				playstylenum = a;
				var imgs = document.querySelectorAll("#bofangliebiao div img");
				for(var i = 0; i < imgs.length; i++) {
					imgs[i].className = ""
				}
				t.className = "active";
			}
			var move;
			function fontmove(){
				clearInterval(move);
				setInterval(function(){
					
				},500)
			}
		</script>
	</head>

	<body>
		<div id="loaddiv1" class="loadclass">
			<img src="img/loading.jpg" />
			<audio id="loadmp3" src="mp3/loading.mp3"></audio>
		</div>
		<div id="loaddiv2" class="loadclass">
			<img src="img/tu3-background.png" />
			<img id="loaddiv2btn" onclick="load2()" src="img/tu3-button.png" />
		</div>
		<div id="loaded" class="loadclass">
			<div id="nav">
				<span>我的</span><span>音乐馆</span><span>MV</span><span>搜索</span><span><img src="img/tu1-set.png" /></span>
			</div>
			<div id="myself">
				<img id="mytx" src="img/tu1-tx.png" /><span>WANG-CARRY</span><img src="img/tu1-right.png" />
			</div>
			<div id="icons">
				<div id="icons1"><img src="img/tu1-allmusic.png" /><br/><span>全部音乐</span></div>
				<div id="icons2"><img src="img/tu1-londdown.png" /><br/><span>下载管理</span></div>
				<div id="icons3"><img src="img/tu1-history.png" /><br/><span>最近播放</span></div>
				<div id="icons4"><img src="img/tu1-love.png" /><br/><span>我喜欢</span></div>
			</div>
			<div id="list">
				<div id="listdiv1">
					<span>我的歌单</span><img src="img/tu1-right.png" />
				</div>
				<div id="listdiv2">
					<img src="img/adele-tx.png" />
					<div><big>Adele</big><br/><span>3首</span></div>
				</div>
				<div id="listdiv3">
					<img src="img/mlh.jpg" />
					<div><big>Maroon5</big><br/><span>3首</span></div>
				</div>
			</div>
			<div id="player">
				<audio id="myaudio"  ontimeupdate="jdt()"></audio>
				<div id="jdt" onclick="changejdt(event)"><span id="jdtspan"></span></div>
				<div id="myplay">
					<img src="" />
					<div id="myplaydiv1"><big id="movebig"></big><span></span></div>
					<div id="myplaydiv2">
						<img src="img/tu1-last.png" onclick="last()" /><img id="playcoin" src="img/tu1-play.png" onclick="play()" /><img src="img/tu1-next.png" onclick="next()" /><img src="img/tu1-list.png" onclick="list()" />
						<div id="mp3list">
							<div id="bofangliebiao">播放列表
								<div><img src="img/tu2-shunxu.png" onclick="setplaystyle(0,this)" /><img src="img/tu2-xunhuan.png" onclick="setplaystyle(1,this)" /><img src="img/tu2-suiji.png" onclick="setplaystyle(2,this)" /></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>